<template>
  <div :class="['navigator', { dark: bgColor != '' }]">
    <div class="logo">
      <img src="~assets/logo.png" alt="" />
    </div>
    <div class="sliding">
      <ul class="meun" ref="meun">
        <li
          v-for="(item, index) in meun"
          class="meun_item"
          @click="switchPointer($event)"
        >
          <a
            :href="index==4 ? 'https://channel.diqiu666.com' : '#' + item.href"
            :style="{ color: bgColor == '' ? 'black' : 'white' }"
          >
            <span class="title">{{ item.title }}</span>
            <span class="titleHint">{{ item.titleHint }}</span>
          </a>
        </li>
      </ul>
      <div :class="['pointer', { pointerAcitve: bgColor != '' }]"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Navigator",
  data() {
    return {
      /* 菜单 */
      meun: [
        {
          title: "首页",
          titleHint: "Home",
          href: "Home",
        },
        {
          title: "我的产品",
          titleHint: "My Products",
          href: "MyProducts",
        },
        {
          title: "产品动态",
          titleHint: "Products News",
          href: "ProductsNews",
        },
        {
          title: "关于我们",
          titleHint: "About Me",
          href: "AboutMe",
        },
        {
          title: "商家登入",
          titleHint: "Business",
          href: "Business",
        },
        {
          title: "联系我们",
          titleHint: "Contact Us",
          href: "ContactUs",
        },
      ],
      activeMeunIndex: 0,
    };
  },
  props: {
    /* 导航栏背景色 */
    bgColor: {
      type: String,
      default: "",
    },
  },
  components: {},
  mounted() {
    this.$nextTick(() => {
      console.log(document.getElementsByTagName("li")[0].getBoundingClientRect());
      this.switchPointer();
    });
  },
  methods: {
    switchMuen(index, e) {
      this.activeMeunIndex = index;
      console.log(index, e);
    },
    switchPointer(e) {
      /* 指示器 */
      let pointer = document.querySelector(".pointer");
      /* 菜单位置 */
      let navigator = this.$refs.meun;
      /* 点击的菜单项位置,第一次进来选中第一个li标签 */
      let li =
        e == undefined
          ? document.getElementsByTagName("li")[0].getBoundingClientRect()
          : e.target.getBoundingClientRect();
      /* 由于li标签没有使用rem单位，所以这里使用px,否则在不同游览器下指示器会错位 */
      // pointer.style.left =
      //   (li.left - navigator.getBoundingClientRect().left) / 10 + "rem";
      // pointer.style.width = li.width / 10 + "rem";
           pointer.style.left =
        (li.left - navigator.getBoundingClientRect().left)+ "px";
      pointer.style.width = li.width + "px";
    },
  },
};
</script>
<style lang="less" scoped>
.dark {
  background: rgba(20, 20, 20, 0.9);
  transition: all 0.2s;
}
.navigator {
  -webkit-user-select: none;
  width: 100vw;
  padding: 1.7rem 12rem;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  align-items: center;
  transition: all 0.2s;
  .logo {
    flex-shrink: 0;
    width: 25rem;
    height: 6.8rem;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .sliding {
    position: relative;
    flex-shrink: 0;
    width: 75.5rem;
    height: 4.3rem;
    .meun {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;

      .meun_item {
        a {
          height: 4.3rem;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
          text-decoration: none;
          // &:hover{
          //   background-color: aqua;
          // }
          .title {
            font-size: 1.6rem;
          }
          .titleHint {
            font-size: 1.2rem;
          }
        }
      }
    }
    .pointer {
      position: absolute;
      height: 0.3rem;
      bottom: -1.8rem;
      // border-radius:20%;
      left: 0;
      background-color:black;
      transition: all 0.4s;
      -webkit-transition: all 0.4s;
    }
    .pointerAcitve{
      background-color:white;
    }
  }
}
// @media screen and (max-width:1700px) {
//   .navigator{
//     padding-left: 10rem;
//     padding-right: 14rem;
//   }
// }
a {
  text-decoration: none;
}
</style>
